با API تایملاین عملکرد، اسرار عملکرد بهینه وب را کشف کنید. یاد بگیرید چگونه معیارهای حیاتی را برای تجربهای کاربری سریعتر و روانتر جمعآوری، تحلیل و استفاده کنید.
تایملاین عملکرد: راهنمای جامع جمعآوری معیارها
در دنیای دیجیتال پرسرعت امروز، عملکرد وبسایت از اهمیت بالایی برخوردار است. کاربران انتظار دارند وبسایتها به سرعت بارگذاری شوند و فوراً پاسخ دهند. یک وبسایت کند میتواند منجر به ناامیدی، ترک جلسه و در نهایت، از دست رفتن درآمد شود. خوشبختانه، مرورگرهای وب مدرن ابزارهای قدرتمندی برای اندازهگیری و تحلیل عملکرد وبسایت ارائه میدهند. یکی از ارزشمندترین این ابزارها، API تایملاین عملکرد (Performance Timeline API) است.
این راهنمای جامع، API تایملاین عملکرد را به تفصیل بررسی میکند و همه چیز را از مفاهیم بنیادی آن گرفته تا تکنیکهای پیشرفته برای جمعآوری و تحلیل معیارهای عملکرد پوشش میدهد. ما به انواع مختلف ورودیهای عملکرد خواهیم پرداخت، نحوه استفاده مؤثر از این API را نشان خواهیم داد و مثالهای عملی برای کمک به شما در بهینهسازی عملکرد وبسایتتان ارائه خواهیم کرد.
API تایملاین عملکرد چیست؟
API تایملاین عملکرد مجموعهای از اینترفیسهای جاوا اسکریپت است که دسترسی به دادههای مرتبط با عملکرد جمعآوریشده توسط مرورگر را فراهم میکند. این API به توسعهدهندگان اجازه میدهد تا جنبههای مختلف عملکرد وبسایت را اندازهگیری کنند، مانند:
- زمان بارگذاری صفحه
- زمان بارگذاری منابع (تصاویر، اسکریپتها، شیوهنامهها)
- اندازهگیریهای زمانبندی کاربر
- نرخ فریم و عملکرد رندرینگ
- استفاده از حافظه
با جمعآوری و تحلیل این دادهها، توسعهدهندگان میتوانند گلوگاههای عملکرد را شناسایی کرده و بهینهسازیهایی را برای بهبود تجربه کاربری پیادهسازی کنند. این API یک روش استاندارد برای دسترسی به دادههای عملکرد فراهم میکند و ساخت ابزارهای نظارت بر عملکرد چند-مرورگری (cross-browser) را آسانتر میسازد.
مفاهیم و اینترفیسهای کلیدی
API تایملاین عملکرد حول چند مفهوم و اینترفیس کلیدی میچرخد:
- تایملاین عملکرد (Performance Timeline): نمایانگر خط زمانی رویدادهای عملکردی است که در طول عمر یک صفحه وب رخ دادهاند. این نقطه مرکزی برای دسترسی به دادههای عملکرد است.
- ورودی عملکرد (Performance Entry): نمایانگر یک رویداد عملکردی واحد است، مانند یک رویداد بارگذاری منبع یا یک اندازهگیری زمانبندی تعریفشده توسط کاربر.
- ناظر عملکرد (Performance Observer): به توسعهدهندگان اجازه میدهد تا تایملاین عملکرد را برای ورودیهای جدید عملکرد نظارت کرده و به آنها به صورت بیدرنگ (real-time) پاسخ دهند.
- شیء `performance`: شیء سراسری (`window.performance`) که دسترسی به تایملاین عملکرد و متدهای مرتبط را فراهم میکند.
شیء `performance`
شیء `performance` نقطه شروع برای تعامل با API تایملاین عملکرد است. این شیء متدهایی برای بازیابی ورودیهای عملکرد، پاک کردن تایملاین و ایجاد ناظران عملکرد فراهم میکند. برخی از متدهای پرکاربرد آن عبارتند از:
- `performance.getEntries()`: آرایهای از تمام ورودیهای عملکرد در تایملاین را برمیگرداند.
- `performance.getEntriesByName(name, entryType)`: آرایهای از ورودیهای عملکرد با یک نام و نوع ورودی مشخص را برمیگرداند.
- `performance.getEntriesByType(entryType)`: آرایهای از ورودیهای عملکرد از یک نوع مشخص را برمیگرداند.
- `performance.clearMarks(markName)`: نشانگرهای عملکرد با یک نام مشخص را پاک میکند.
- `performance.clearMeasures(measureName)`: معیارهای عملکرد با یک نام مشخص را پاک میکند.
- `performance.now()`: یک مهر زمانی با وضوح بالا، معمولاً به میلیثانیه، که زمان سپریشده از شروع ناوبری را نشان میدهد، برمیگرداند. این برای اندازهگیری مدت زمانها حیاتی است.
انواع ورودی عملکرد
API تایملاین عملکرد چندین نوع مختلف از ورودیهای عملکرد را تعریف میکند که هر کدام نمایانگر نوع خاصی از رویداد عملکرد هستند. برخی از مهمترین انواع ورودی عبارتند از:
- `navigation`: نمایانگر زمانبندی ناوبری برای بارگذاری یک صفحه است، شامل جستجوی DNS، اتصال TCP، درخواست و زمان پاسخ.
- `resource`: نمایانگر بارگذاری یک منبع خاص مانند تصویر، اسکریپت یا شیوهنامه است.
- `mark`: نمایانگر یک مهر زمانی تعریفشده توسط کاربر در تایملاین است.
- `measure`: نمایانگر یک مدت زمان تعریفشده توسط کاربر در تایملاین است که بین دو نشانگر محاسبه میشود.
- `paint`: نمایانگر زمانی است که مرورگر برای نمایش اولین محتوا روی صفحه (First Paint) و اولین محتوای معنادار (First Contentful Paint) صرف میکند.
- `longtask`: نمایانگر وظایفی است که نخ اصلی (main thread) را برای مدت زمان طولانی (معمولاً بیشتر از ۵۰ میلیثانیه) مسدود میکنند و به طور بالقوه باعث پرش در رابط کاربری (UI jank) میشوند.
- `event`: نمایانگر یک رویداد مرورگر مانند کلیک ماوس یا فشردن کلید است.
- `layout-shift`: نمایانگر جابجاییهای غیرمنتظره در طرحبندی صفحه است که میتواند تجربه کاربری را مختل کند (Cumulative Layout Shift).
- `largest-contentful-paint`: نمایانگر زمانی است که بزرگترین عنصر محتوایی در دیدرس (viewport) قابل مشاهده میشود.
جمعآوری معیارهای عملکرد
چندین راه برای جمعآوری معیارهای عملکرد با استفاده از API تایملاین عملکرد وجود دارد. رایجترین رویکردها عبارتند از:
- بازیابی مستقیم ورودیها از تایملاین: استفاده از `performance.getEntries()`، `performance.getEntriesByName()` یا `performance.getEntriesByType()` برای بازیابی ورودیهای عملکرد خاص.
- استفاده از Performance Observer: نظارت بر تایملاین برای ورودیهای جدید و پاسخ به آنها به صورت بیدرنگ.
بازیابی مستقیم ورودیها
سادهترین راه برای جمعآوری معیارهای عملکرد، بازیابی مستقیم ورودیها از تایملاین است. این روش برای جمعآوری دادهها پس از وقوع یک رویداد خاص، مانند پس از بارگذاری صفحه یا پس از تعامل کاربر با یک عنصر خاص، مفید است.
در اینجا مثالی از نحوه بازیابی تمام ورودیهای منابع از تایملاین آورده شده است:
const resourceEntries = performance.getEntriesByType("resource");
resourceEntries.forEach(entry => {
console.log(`Resource: ${entry.name}, Duration: ${entry.duration}ms`);
});
این کد تمام ورودیهای از نوع "resource" را بازیابی کرده و نام و مدت زمان هر منبع را در کنسول ثبت میکند.
استفاده از Performance Observer
یک Performance Observer به شما امکان میدهد تا تایملاین عملکرد را برای ورودیهای جدید عملکرد نظارت کرده و به آنها به صورت بیدرنگ پاسخ دهید. این روش به ویژه برای جمعآوری دادهها به محض در دسترس قرار گرفتن، بدون نیاز به پرسوجوی مکرر از تایملاین، مفید است.
در اینجا مثالی از نحوه استفاده از Performance Observer برای نظارت بر ورودیهای جدید منابع آورده شده است:
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach(entry => {
console.log(`Resource loaded: ${entry.name}, duration: ${entry.duration}ms`);
});
});
observer.observe({ entryTypes: ["resource"] });
این کد یک Performance Observer ایجاد میکند که به ورودیهای جدید از نوع "resource" گوش میدهد. هنگامی که یک ورودی منبع جدید به تایملاین اضافه میشود، تابع callback ناظر اجرا شده و نام و مدت زمان منبع را در کنسول ثبت میکند. متد `observer.observe()` مشخص میکند که ناظر باید کدام نوع ورودیها را نظارت کند.
اندازهگیری زمانبندی کاربر
API تایملاین عملکرد همچنین به شما اجازه میدهد تا با استفاده از انواع ورودی `mark` و `measure`، معیارهای عملکرد سفارشی خود را تعریف کنید. این کار برای اندازهگیری زمان لازم برای اجرای بخشهای خاصی از برنامه شما، مانند رندر کردن یک کامپوننت یا پردازش ورودی کاربر، مفید است.
برای اندازهگیری زمانبندی کاربر، ابتدا یک `mark` برای نشانهگذاری شروع و پایان بخشی که میخواهید اندازهگیری کنید، ایجاد میکنید. سپس، یک `measure` برای محاسبه مدت زمان بین دو نشانگر ایجاد میکنید.
در اینجا مثالی از نحوه اندازهگیری زمان لازم برای رندر کردن یک کامپوننت آورده شده است:
performance.mark("component-render-start");
// Code to render the component
performance.mark("component-render-end");
performance.measure("component-render-time", "component-render-start", "component-render-end");
const measure = performance.getEntriesByName("component-render-time", "measure")[0];
console.log(`Component render time: ${measure.duration}ms`);
این کد دو نشانگر `component-render-start` و `component-render-end` را قبل و بعد از کدی که کامپوننت را رندر میکند، ایجاد میکند. سپس، یک معیار به نام `component-render-time` برای محاسبه مدت زمان بین دو نشانگر ایجاد میکند. در نهایت، ورودی معیار را از تایملاین بازیابی کرده و مدت زمان را در کنسول ثبت میکند.
تحلیل معیارهای عملکرد
پس از جمعآوری معیارهای عملکرد، باید آنها را برای شناسایی گلوگاههای عملکرد و پیادهسازی بهینهسازیها تحلیل کنید. ابزارها و تکنیکهای مختلفی برای این منظور وجود دارد:
- ابزارهای توسعهدهنده مرورگر: اکثر مرورگرهای وب مدرن ابزارهای توسعهدهنده داخلی دارند که به شما امکان میدهند دادههای عملکرد را مشاهده و تحلیل کنید. این ابزارها معمولاً شامل یک پنل Performance هستند که تایملاینی از رویدادهای عملکرد را نشان میدهد، و همچنین ابزارهایی برای پروفایل کردن کد جاوا اسکریپت و تحلیل استفاده از حافظه دارند.
- ابزارهای نظارت بر عملکرد: ابزارهای نظارت بر عملکرد شخص ثالث زیادی وجود دارند که میتوانند به شما در جمعآوری، تحلیل و مصورسازی دادههای عملکرد کمک کنند. این ابزارها اغلب ویژگیهای پیشرفتهای مانند نظارت بیدرنگ، تشخیص ناهنجاری و گزارشدهی خودکار ارائه میدهند. نمونههایی از این ابزارها New Relic، Datadog و Sentry هستند.
- Web Vitals: ابتکار Web Vitals گوگل مجموعهای از معیارها را ارائه میدهد که برای اندازهگیری تجربه کاربری ضروری تلقی میشوند. این معیارها شامل Largest Contentful Paint (LCP)، First Input Delay (FID) و Cumulative Layout Shift (CLS) هستند. نظارت بر این معیارها میتواند به شما در شناسایی و رفع مشکلات رایج عملکرد کمک کند.
استفاده از ابزارهای توسعهدهنده مرورگر
ابزارهای توسعهدهنده مرورگر منبعی قدرتمند و در دسترس برای تحلیل عملکرد هستند. در اینجا نحوه استفاده از پنل Performance در Chrome Developer Tools آمده است (مرورگرهای دیگر عملکردهای مشابهی دارند):
- باز کردن ابزارهای توسعهدهنده: روی صفحه وب راستکلیک کرده و "Inspect" را انتخاب کنید یا F12 را فشار دهید.
- رفتن به پنل Performance: روی تب "Performance" کلیک کنید.
- شروع ضبط: روی دکمه ضبط (معمولاً یک دایره) کلیک کنید تا ضبط دادههای عملکرد شروع شود.
- تعامل با صفحه: اقداماتی را که میخواهید تحلیل کنید، انجام دهید، مانند بارگذاری صفحه، کلیک روی دکمهها یا اسکرول کردن.
- توقف ضبط: روی دکمه توقف کلیک کنید تا ضبط به پایان برسد.
- تحلیل تایملاین: پنل Performance تایملاینی از رویدادهای عملکرد، از جمله زمانهای بارگذاری، اجرای جاوا اسکریپت، رندرینگ و نقاشی (painting) را نمایش میدهد.
این تایملاین اطلاعات دقیقی در مورد هر رویداد، از جمله مدت زمان، زمان شروع و ارتباط آن با رویدادهای دیگر ارائه میدهد. شما میتوانید بزرگنمایی و کوچکنمایی کنید، رویدادها را بر اساس نوع فیلتر کنید و رویدادهای فردی را برای اطلاعات بیشتر بررسی کنید. تبهای "Bottom-Up"، "Call Tree" و "Event Log" دیدگاههای متفاوتی از دادهها را ارائه میدهند که به شما امکان میدهد گلوگاههای عملکرد را شناسایی کرده و کد خود را بهینهسازی کنید.
Web Vitals: اندازهگیری تجربه کاربری
Web Vitals مجموعهای از معیارها هستند که توسط گوگل برای اندازهگیری تجربه کاربری در یک وبسایت تعریف شدهاند. تمرکز بر این معیارها میتواند به طور قابل توجهی رضایت کاربر و رتبه SEO را بهبود بخشد.
- Largest Contentful Paint (LCP): زمانی را که بزرگترین عنصر محتوایی در دیدرس (viewport) قابل مشاهده میشود، اندازهگیری میکند. امتیاز خوب LCP برابر با ۲.۵ ثانیه یا کمتر است.
- First Input Delay (FID): زمانی را که مرورگر برای پاسخ به اولین تعامل کاربر (مثلاً کلیک روی یک دکمه یا ضربه زدن روی یک لینک) صرف میکند، اندازهگیری میکند. امتیاز خوب FID برابر با ۱۰۰ میلیثانیه یا کمتر است.
- Cumulative Layout Shift (CLS): میزان جابجاییهای غیرمنتظره در طرحبندی صفحه را اندازهگیری میکند. امتیاز خوب CLS برابر با ۰.۱ یا کمتر است.
شما میتوانید Web Vitals را با استفاده از ابزارهای مختلفی اندازهگیری کنید، از جمله:
- Chrome User Experience Report (CrUX): دادههای عملکرد دنیای واقعی را برای وبسایتها بر اساس دادههای ناشناس کاربران کروم ارائه میدهد.
- Lighthouse: یک ابزار خودکار که عملکرد، دسترسیپذیری و SEO صفحات وب را بازرسی میکند.
- Web Vitals Extension: یک افزونه کروم که معیارهای Web Vitals را به صورت بیدرنگ هنگام مرور وب نمایش میدهد.
- PerformanceObserver API: به طور مستقیم دادههای web vitals را از مرورگر به محض وقوع رویدادها دریافت کنید.
مثالهای عملی و موارد استفاده
در اینجا چند مثال عملی و موارد استفاده از نحوه بهینهسازی عملکرد وبسایت با استفاده از API تایملاین عملکرد آورده شده است:
- شناسایی منابعی که به کندی بارگذاری میشوند: از نوع ورودی `resource` برای شناسایی تصاویر، اسکریپتها و شیوهنامههایی که بارگذاری آنها زمان زیادی میبرد، استفاده کنید. این منابع را با فشردهسازی، استفاده از شبکه توزیع محتوا (CDN) یا بارگذاری تنبل (lazy-loading) بهینه کنید. به عنوان مثال، بسیاری از پلتفرمهای تجارت الکترونیک مانند Shopify، Magento یا WooCommerce برای فروش محصولات به تصاویر متکی هستند. بهینهسازی بارگذاری تصاویر با استفاده از دادههای تایملاین عملکرد، تجربه مشتری را به ویژه برای کاربران موبایل بهبود میبخشد.
- اندازهگیری زمان اجرای جاوا اسکریپت: از انواع ورودی `mark` و `measure` برای اندازهگیری زمان اجرای توابع خاص جاوا اسکریپت استفاده کنید. توابع کند را شناسایی کرده و با استفاده از الگوریتمهای کارآمدتر، کش کردن نتایج یا به تعویق انداختن اجرا، آنها را بهینه کنید.
- تشخیص وظایف طولانی (Long Tasks): از نوع ورودی `longtask` برای شناسایی وظایفی که نخ اصلی را برای مدت زمان طولانی مسدود میکنند، استفاده کنید. این وظایف را به قطعات کوچکتر تقسیم کنید یا آنها را به یک نخ پسزمینه (background thread) منتقل کنید تا از پرش در رابط کاربری جلوگیری شود.
- نظارت بر First Contentful Paint (FCP) و Largest Contentful Paint (LCP): از انواع ورودی `paint` و `largest-contentful-paint` برای نظارت بر زمانی که اولین محتوا و بزرگترین محتوا روی صفحه ظاهر میشوند، استفاده کنید. مسیر رندرینگ حیاتی (critical rendering path) را برای بهبود این معیارها بهینه کنید.
- تحلیل Cumulative Layout Shift (CLS): از نوع ورودی `layout-shift` برای شناسایی عناصری که باعث جابجاییهای غیرمنتظره در طرحبندی میشوند، استفاده کنید. برای این عناصر فضا رزرو کنید یا از خاصیت `transform` برای انیمیشن دادن به آنها بدون ایجاد جابجایی در طرحبندی استفاده کنید.
تکنیکهای پیشرفته
پس از درک کامل اصول اولیه API تایملاین عملکرد، میتوانید برخی از تکنیکهای پیشرفته را برای بهینهسازی بیشتر عملکرد وبسایت خود بررسی کنید:
- نظارت بر کاربر واقعی (RUM): دادههای عملکرد را از کاربران واقعی در میدان جمعآوری کنید تا تصویر دقیقتری از عملکرد وبسایت خود به دست آورید. از یک ابزار RUM استفاده کنید یا راهحل RUM سفارشی خود را با استفاده از API تایملاین عملکرد پیادهسازی کنید. این دادهها میتوانند برای تعیین تفاوتهای عملکرد منطقهای استفاده شوند. به عنوان مثال، یک وبسایت میزبانیشده در آمریکا ممکن است به دلیل تأخیر شبکه، زمان بارگذاری کندتری در آسیا داشته باشد.
- نظارت مصنوعی (Synthetic Monitoring): از نظارت مصنوعی برای شبیهسازی تعاملات کاربر و اندازهگیری عملکرد در یک محیط کنترلشده استفاده کنید. این کار میتواند به شما در شناسایی مشکلات عملکرد قبل از تأثیرگذاری بر کاربران واقعی کمک کند.
- تست عملکرد خودکار: تست عملکرد را در خط لوله یکپارچهسازی/استقرار مداوم (CI/CD) خود ادغام کنید تا رگرسیونهای عملکرد را به طور خودکار شناسایی کنید. ابزارهایی مانند Lighthouse CI میتوانند برای خودکارسازی این فرآیند استفاده شوند.
- بودجهبندی عملکرد: برای معیارهای کلیدی مانند زمان بارگذاری صفحه، اندازه منابع و زمان اجرای جاوا اسکریپت، بودجههای عملکرد تعیین کنید. از ابزارهای خودکار برای نظارت بر این بودجهها استفاده کنید و در صورت فراتر رفتن از آنها به شما هشدار داده شود.
سازگاری بین مرورگرها
API تایملاین عملکرد به طور گسترده توسط مرورگرهای وب مدرن، از جمله کروم، فایرفاکس، سافاری و اج پشتیبانی میشود. با این حال، ممکن است تفاوتهایی در پیادهسازی و رفتار این API در مرورگرهای مختلف وجود داشته باشد.
برای اطمینان از سازگاری بین مرورگرها، مهم است که کد خود را در مرورگرهای مختلف آزمایش کنید و از تشخیص ویژگی (feature detection) برای تنزل تدریجی عملکرد در صورت عدم پشتیبانی از API استفاده کنید. کتابخانههایی مانند `modernizr` میتوانند در تشخیص ویژگی کمک کنند.
بهترین شیوهها
در اینجا برخی از بهترین شیوهها برای استفاده از API تایملاین عملکرد آورده شده است:
- استفاده از Performance Observers برای نظارت بیدرنگ: Performance Observers روش کارآمدتری برای جمعآوری دادههای عملکرد نسبت به پرسوجوی مکرر از تایملاین فراهم میکنند.
- مراقب تأثیر جمعآوری دادههای عملکرد بر عملکرد باشید: جمعآوری دادههای بیش از حد میتواند بر عملکرد وبسایت شما تأثیر منفی بگذارد. فقط دادههای مورد نیاز خود را جمعآوری کنید و از انجام عملیات پرهزینه در تابع callback ناظر عملکرد خودداری کنید.
- از نامهای معنادار برای نشانگرها و معیارها استفاده کنید: این کار تحلیل دادهها و شناسایی گلوگاههای عملکرد را آسانتر میکند.
- کد خود را در مرورگرهای مختلف آزمایش کنید: با آزمایش کد خود در مرورگرهای مختلف و استفاده از تشخیص ویژگی، از سازگاری بین مرورگرها اطمینان حاصل کنید.
- ترکیب با سایر تکنیکهای بهینهسازی: API تایملاین عملکرد به اندازهگیری و شناسایی مشکلات کمک میکند. از آن در کنار بهترین شیوههای بهینهسازی وب (بهینهسازی تصویر، کوچکسازی، استفاده از CDN) برای بهبود جامع عملکرد استفاده کنید.
نتیجهگیری
API تایملاین عملکرد یک ابزار قدرتمند برای اندازهگیری و تحلیل عملکرد وبسایت است. با درک مفاهیم و اینترفیسهای کلیدی این API، میتوانید معیارهای عملکرد ارزشمندی را جمعآوری کرده و از آنها برای شناسایی گلوگاههای عملکرد و پیادهسازی بهینهسازیها استفاده کنید. با تمرکز بر Web Vitals و پیادهسازی تکنیکهای پیشرفته مانند RUM و تست عملکرد خودکار، میتوانید تجربهای کاربری سریعتر، روانتر و لذتبخشتر ارائه دهید. پذیرش API تایملاین عملکرد و ادغام تحلیل عملکرد در جریان کاری توسعه شما، منجر به بهبودهای قابل توجهی در عملکرد وبسایت و رضایت کاربر در محیط وب امروز که مبتنی بر عملکرد است، خواهد شد.